<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
<!--  <div id="app">-->
<!--    <TreeInput />-->
<!--  </div>-->
<!--  <div id="app">-->
<!--    <TTitleBase />-->
<!--  </div>-->
  <div id="app">
    <Greeting name="Jin"/>
  </div>
</template>


<!--<script setup>import TreeInput from './components/TreeInput.vue';-->
<!--</script>-->

<!--
使用组件 ： 要在vue3 应用中使用这个组件，需要在 script setup 中导入
将其注册为局部组件。
Greeting 组件被导入并在模板中使用，传入了一个名为 jin的 name属性
当渲染这个父组件时，Greeting 组件将会显示一条针对 jin 的问候语。
-->
<script setup>
// 导入组件 使用 import 导入组件
import TTitleBase from './components/TTitleBase.vue';
import Greeting from "@/components/Greeting.vue";
</script>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
